<template>
  <div class="pieChart">
    <div class="pieChart" ref="pieChart"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myChart: null,
      chartOptions: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        color: [
          "#065aab",
          "#066eab",
          "#0682ab",
          "#0696ab",
          "#06a0ab",
        ],
        legend: {
          //   orient: "vertical",
          // left: "left",
          // 距离底部为0%
          bottom: "1%",
          // 小图标的宽度和高度
          itemWidth: 10,
          itemHeight: 10,
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
          // 修改图例组件的文字为 12px
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
              // 设置饼形图在容器中的位置
            center: ["50%", "40%"],
            //  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的
            radius: ["40%", "60%"],
                // 不显示标签文字
            label: { show: false },
            // 不显示连接线
            labelLine: { show: false },
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" },
            ],
            //新增饼状图间隔
            itemStyle:{
                borderWidth:5, //设置border的宽度有多大
                borderColor:'#01125D',
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.createEchart();
  },
  methods: {
    createEchart() {
      this.myChart = this.$echarts
        .init(this.$refs.pieChart)
        .setOption(this.chartOptions);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.pieChart {
  width: 100%;
  height: 100%;
}
</style>
